<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog Home</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .blog-post {
            margin-bottom: 2rem;
        }

        .blog-post-title {
            margin-bottom: .25rem;
            font-size: 2.5rem;
        }

        .blog-post-meta {
            margin-bottom: 1.25rem;
            color: #6c757d;
        }

        .blog-sidebar {
            margin-top: 2rem;
        }

        .featured-post {
            margin-bottom: 1rem;
        }
    </style>
</head>

<body>
    <div class="container">
        <header class="blog-header py-3">
            <div class="row flex-nowrap justify-content-between align-items-center">
                <div class="col-4 pt-1">
                    <a class="btn btn-sm btn-outline-secondary" href="#">Subscribe</a>
                </div>
                <div class="col-4 text-center">
                    <a class="blog-header-logo text-dark" href="#">My Blog</a>
                </div>
                <div class="col-4 d-flex justify-content-end align-items-center">
                    <a class="link-secondary" href="#" aria-label="Search">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor"
                            stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="mx-3" role="img"
                            viewBox="0 0 24 24">
                            <title>Search</title>
                            <circle cx="11" cy="11" r="8"></circle>
                            <path d="m21 21-4.35-4.35"></path>
                        </svg>
                    </a>
                    <a class="btn btn-sm btn-outline-secondary" href="#">Sign up</a>
                </div>
            </div>
        </header>

        <div class="nav-scroller py-1 mb-2">
            <nav class="nav d-flex justify-content-between">
                <a class="p-2 link-secondary" href="#">World</a>
                <a class="p-2 link-secondary" href="#">Technology</a>
                <a class="p-2 link-secondary" href="#">Design</a>
                <a class="p-2 link-secondary" href="#">Culture</a>
                <a class="p-2 link-secondary" href="#">Business</a>
                <a class="p-2 link-secondary" href="#">Politics</a>
                <a class="p-2 link-secondary" href="#">Opinion</a>
                <a class="p-2 link-secondary" href="#">Science</a>
                <a class="p-2 link-secondary" href="#">Health</a>
                <a class="p-2 link-secondary" href="#">Style</a>
                <a class="p-2 link-secondary" href="#">Travel</a>
            </nav>
        </div>

        <div class="row g-5">
            <div class="col-md-8">
                <h3 class="pb-4 mb-4 fst-italic border-bottom">
                    {{articles}}
                </h3>

                {{#each articles}}
                <article class="blog-post">
                    <h2 class="blog-post-title">{{title}}</h2>
                    <p class="blog-post-meta">{{create_time}} by <a href="#">无</a></p>
                    <p>{{content}}</p>
                    <a href="./article/{{id}}">reading...</a>
                </article>
                {{/each}}

                <nav class="blog-pagination" aria-label="Pagination">
                    <a class="btn btn-outline-primary" href="#">Older</a>
                    <a class="btn btn-outline-secondary disabled" href="#" tabindex="-1" aria-disabled="true">Newer</a>
                </nav>
            </div>

            <div class="col-md-4">
                <div class="blog-sidebar">
                    <div class="p-4 mb-3 bg-light rounded">
                        <h4 class="fst-italic">About</h4>
                        <p class="mb-0">This is a blog about various topics including technology, design, and culture.
                            Follow us for the latest updates and insights.</p>
                    </div>

                    <div class="p-4">
                        <h4 class="fst-italic">Archives</h4>
                        <ol class="list-unstyled mb-0">
                            <li><a href="#">March 2023</a></li>
                            <li><a href="#">February 2023</a></li>
                            <li><a href="#">January 2023</a></li>
                            <li><a href="#">December 2022</a></li>
                            <li><a href="#">November 2022</a></li>
                        </ol>
                    </div>

                    <div class="p-4">
                        <h4 class="fst-italic">Featured Posts</h4>
                        <div class="featured-post">
                            <h6><a href="#">Getting started with Bootstrap</a></h6>
                            <small class="text-muted">January 15, 2023</small>
                        </div>
                        <div class="featured-post">
                            <h6><a href="#">Web design trends for 2023</a></h6>
                            <small class="text-muted">January 10, 2023</small>
                        </div>
                        <div class="featured-post">
                            <h6><a href="#">Introduction to JavaScript</a></h6>
                            <small class="text-muted">January 5, 2023</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="blog-footer">
        <p>Blog template built for <a href="#">Bootstrap</a> by <a href="#">@mdo</a>.</p>
        <p>
            <a href="#">Back to top</a>
        </p>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>